<template>
  <div class="ajax-test">
    <h2>ajax测试</h2>
    <el-button size="small"
      @click="ajaxTest"
      plain>ajax重定向测试</el-button>
    <p>ajax请求时，后端返回status302，指定重定向地址Location，浏览器并不会打开Location地址，而是会通过ajax请求这个地址。</p>
    <p>ajax请求Location地址会报跨域的错，即便解决了跨域问题，通常response里是一个html页面，并不会在浏览器窗口打开页面。</p>
    <p>如何解决ajax交互下的重定向，一般是前后端自定义请求协议。</p>
    <p>后端所有接口返回正常的status200，返回数据里包一层code，比如说401，前端判断code === 401，window.location.href = res.location来跳转。</p>
    <a class="link"
      href="https://zhuanlan.zhihu.com/p/383548535"
      target="_blank">https://zhuanlan.zhihu.com/p/383548535</a>
  </div>
</template>

<script>
  import { redic } from '@/api/module/ajaxtest.js';
  export default {
    name: 'ajaxtest',
    data() {
      return {};
    },
    methods: {
      ajaxTest() {
        redic().then((res) => {
          console.log(res);
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ajax-test {
    .link {
      color: #0070d2;
    }
  }
</style>


